<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="lib/vue.global.js"></script>
</head>
<body>
  <div id="root">
    {{ count }}
    <div>
      <!-- <button @click="count+=1">add</button> -->
      <button @click="handlerClick">add</button>
    </div>
  </div>
</body>
<script>
  const {
    createApp,
    ref
  } = window.Vue

  const app = createApp({
    setup () {
      
      // 定义初始化的数据
      // 响应式数据使用 ref 来设定简单的数据类型
      const count = ref(100)

      // 自定义事件
      // 接受一个参数值并返回一个响应式且可改变的 ref 对象。
      // ref 对象拥有一个指向内部值的单一属性 .value。
      const handlerClick = () => {
        console.log(count) // count.value 其实才是真实的值
        count.value += 10
      }
      return {
        count,
        handlerClick
      }
    }
  })
  app.mount('#root')
</script>
</html>